<template>
    <tool-header>
        {{ title }}
    </tool-header>
    <a-row justify="center">
        <a-col :flex="2">
            <div style="margin:20px">
                <a-textarea v-model:value="rawSql" placeholder="" :rows="20" />
            </div>
        </a-col>
        <a-col :flex="2">
            
            <div style="margin:20px">
                <a-textarea ref="dom" :value="prettySql" placeholder="" :rows="20" />
                <a-button type="primary" @click="onCopy">Copy</a-button>
                <a-button type="primary" @click="onPem">onPem</a-button>
            </div>
            <div>
                
            </div>
        </a-col>
    </a-row>
</template>

<script setup lang='ts'>
import { ref, computed } from 'vue'
import { format } from 'sql-formatter';
import { useRoute } from 'vue-router'
import ToolHeader from '../ToolHeader.vue'
const rawSql = ref<string>("SELECT * FROM Employee;")
const prettySql = computed(() => {
    return format(rawSql.value, { language: 'sql' })
})
const route = useRoute();
const title = route.query.title;

const onCopy = async ()=> {
    await navigator.clipboard.writeText(prettySql.value)
}
const onPem = async () => {
    const pem = `
-----BEGIN CERTIFICATE-----
MIIGlDCCBXygAwIBAgIQAifIGmMgWqYBLnED7kvkRTANBgkqhkiG9w0BAQsFADBe
MQswCQYDVQQGEwJVUzEVMBMGA1UEChMMRGlnaUNlcnQgSW5jMRkwFwYDVQQLExB3
d3cuZGlnaWNlcnQuY29tMR0wGwYDVQQDExRUaGF3dGUgVExTIFJTQSBDQSBHMTAe
Fw0yMzA4MzAwMDAwMDBaFw0yNDA5MjkyMzU5NTlaMIGCMQswCQYDVQQGEwJVUzET
MBEGA1UECBMKQ2FsaWZvcm5pYTEUMBIGA1UEBxMLU2FudGEgQ2xhcmExJzAlBgNV
BAoTHmVIZWFsdGhJbnN1cmFuY2UgU2VydmljZXMgSW5jLjEfMB0GA1UEAwwWKi5l
aGVhbHRoaW5zdXJhbmNlLmNvbTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
ggEBAOLmqB1T3a9MNLGCDALMR+1bn1GGrf5DU4qsTClPebefUHSc/y30Wn1D8wFa
QAK00mwVC0PnMK2g1QOkdZe2Ca+CvmTTDtUKvB4AhylGjAt4sdwqFIabP4H1dDlj
KctTpkMKJmju6W50NoJF7koP4mg13/b0jJ0fbRVHD7WOa9avKr5gZ93Jbw4qutJ0
nyQkVGPHo9TI6u61twmheRD0i++icnLTP9DdBb/K1SdCwe9/P8Tojr261NKfwyFX
KHhNK6V/yaNKDkvUCQmOHSWYF6Uhxq57ibrULbeHQwYJro8aT8/P2LK/a4onN1B8
BdRfk2JNmJLr5WYqOPnnnPlaNE8CAwEAAaOCAycwggMjMB8GA1UdIwQYMBaAFKWM
/jLM6w8s1BnGCLgAJIhdw8W3MB0GA1UdDgQWBBRAB3u4OC/Ovdchsv/HvTgkVbn5
kjA3BgNVHREEMDAughYqLmVoZWFsdGhpbnN1cmFuY2UuY29tghRlaGVhbHRoaW5z
dXJhbmNlLmNvbTAOBgNVHQ8BAf8EBAMCBaAwHQYDVR0lBBYwFAYIKwYBBQUHAwEG
CCsGAQUFBwMCMDsGA1UdHwQ0MDIwMKAuoCyGKmh0dHA6Ly9jZHAudGhhd3RlLmNv
bS9UaGF3dGVUTFNSU0FDQUcxLmNybDA+BgNVHSAENzA1MDMGBmeBDAECAjApMCcG
CCsGAQUFBwIBFhtodHRwOi8vd3d3LmRpZ2ljZXJ0LmNvbS9DUFMwcAYIKwYBBQUH
AQEEZDBiMCQGCCsGAQUFBzABhhhodHRwOi8vc3RhdHVzLnRoYXd0ZS5jb20wOgYI
KwYBBQUHMAKGLmh0dHA6Ly9jYWNlcnRzLnRoYXd0ZS5jb20vVGhhd3RlVExTUlNB
Q0FHMS5jcnQwCQYDVR0TBAIwADCCAX0GCisGAQQB1nkCBAIEggFtBIIBaQFnAHYA
7s3QZNXbGs7FXLedtM0TojKHRny87N7DUUhZRnEftZsAAAGKRAoXXwAABAMARzBF
AiA99e0ZrwOwMnb1+gpJRUWeghGcAcU+Il59RyGDiL7GhQIhALKLUZx7EjrZ+ASU
1tOjsvHY4mUOz5W147C6bjetCrlaAHUASLDja9qmRzQP5WoC+p0w6xxSActW3SyB
2bu/qznYhHMAAAGKRAoVvAAABAMARjBEAiBSjvMe93JrHoug8ktL8CvmmosDdXgH
lkJbzJD6Ykg1BwIgXbCBB2jebiptdi8taUD/IpEpPjkuxm6/HSO6G2PYeakAdgDa
tr9rP7W2Ip+bwrtca+hwkXFsu1GEhTS9pD0wSNf7qwAAAYpEChXiAAAEAwBHMEUC
IHTgR3oAoQGUa1KzNrY4y5M3lVKsFKDIVzfmVCsP3rngAiEAzD+g2aNvtk7hkUoN
aR+zBtUVSTy31AL2JEiTIhIWiKwwDQYJKoZIhvcNAQELBQADggEBAGxTLER6J4fk
0VXRJdcwPotWczhPT9ZpgLU7LTzVfynWIv2VsZEjH9HC9nIg+uz75VUt3Ctu9oGP
+Xia/4bi3ITFzKukt2n1uS1jRH06eGHBo7dAFhnidwssNai8WzXbazdLskfluKTX
nxOEwztm5Beqv3JuuBw0NGb/z9P/EkwJAF5D0EdSIRbIYH5yZThI0q4cihh/gqPL
vOz8XCfcLBL0PpSL0eCsmf5uBt3U9fYBOTKVDCPJ87qGHelIQEyQaHRR6jABKbeY
hIQYrCQ3jv8Ri5PqGRufCW3f62onLuctPcN1DIUBtlWz8X5l3YX2G19azLxsj5tr
jEDJjxJFA1M=
-----END CERTIFICATE-----
`
}
</script>

<style scoped></style>